<template>
    <view>
        <view class="header">
            <view class="header-search">
                <input type="text">
                <i class="iconfont icon-search"></i>
            </view>
            <view class="header-condition">
                <view :class="active === 0 ? 'condition-item active' : 'condition-item'" @click="active = 0">全部商品</view>
                <view :class="active === 1 ? 'condition-item active' : 'condition-item'" @click="active = 1">热销</view>
                <view :class="active === 2 ? 'condition-item active' : 'condition-item'" @click="active = 2">上新</view>
            </view>
        </view>
        <view style="height:94vh">
            <swiper :current="active" style="height:100%;" @change="SwiperChange">
                <swiper-item @touchmove.stop>
                    <scroll-view style="height:100%" scroll-y>
                        <view class="tab-top">
                            <view :class="tabActive === 0 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 0">全部</view>
                            <view :class="tabActive === 1 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 1">销量</view>
                            <view :class="tabActive === 2 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 2">价格<i class="iconfont icon-select-tb"></i></view>
                        </view>
                        <view style="height:70vh">
                            <swiper :current="tabActive" style="height:100%;" @change="swiperChange">
                                <swiper-item>
                                    <scroll-view style="height:100%;" scroll-y>
                                        <view class="content">
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                            <view class="content-item">
                                                <view class="item-img"></view>
                                                <view class="item-info">
                                                    <view class="item-name">桂花糕</view>
                                                    <view class="item-price">￥27.0</view>
                                                </view>
                                            </view>
                                        </view>
                                    </scroll-view>
                                </swiper-item>
                                <swiper-item>
                                    <view>销量</view>
                                </swiper-item>
                                <swiper-item>
                                    <view>价格</view>
                                </swiper-item>
                            </swiper>
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item @touchmove.stop>
                    <scroll-view style="height:100%" scroll-y>
                        <view class="tab-top">
                            <view :class="tabActive === 0 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 0">全部</view>
                            <view :class="tabActive === 1 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 1">销量</view>
                            <view :class="tabActive === 2 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 2">价格<i class="iconfont icon-select-tb"></i></view>
                        </view>
                        <view>热销</view>
                    </scroll-view>
                </swiper-item>
                <swiper-item @touchmove.stop>
                    <scroll-view style="height:100%" scroll-y>
                        <view class="tab-top">
                            <view :class="tabActive === 0 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 0">全部</view>
                            <view :class="tabActive === 1 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 1">销量</view>
                            <view :class="tabActive === 2 ? 'tab-top-item tabActive' : 'tab-top-item'" @click="tabActive = 2">价格<i class="iconfont icon-select-tb"></i></view>
                        </view>
                        <view>上新</view>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
        <view class="bottom">
            <view class="bottom-item" @click="goStoreDetail">店铺详情</view>
            <view class="bottom-item" style="margin-left:28rpx">联系客服</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            active: 0,
            tabActive: 0
        }
    },
    methods: {
        SwiperChange(e) {
            this.tabActive = 0
        },
        swiperChange(e) {
            this.tabActive = e.detail.current;
        },
        goStoreDetail() {
            uni.navigateTo({
                url: '/pagesA/store-detail/store-detail'
            })
        }
    }
}
</script>

<style>
    .header {
        height: 57rpx;
        background: #24C79C;
        padding: 21.5rpx 38rpx;
        display: flex;
        justify-content: left;
    }
    .header-search {
        position: relative;
        width: 159rpx;
        height: 57rpx;
        background:rgba(255,255,255,1);
        border-radius:29px;
    }
    .header-search input {
        height: 100%;
        padding: 0 50rpx 0 20rpx;
    }
    .icon-search {
        position: absolute;
        top: 16rpx;
        right: 20rpx;
        color: #BFBFBF;
        font-size: 30rpx;
    }
    .header-condition {
        display: flex;
        justify-content: space-between;
        margin-left: 38rpx;
    }
    .condition-item {
        width: 160rpx;
        text-align: center;
        color: #F7F7F7;
        font-size: 28rpx;
        font-weight: lighter;
        line-height: 57rpx;
    }
    .icon-select-tb {
        font-size: 25rpx;
    }
    .active {
        font-size: 28rpx;
        font-weight: bold;
        color: #ffffff;
    }
    .tab-top {
        height: 85rpx;
        background:rgba(255,255,255,1);
        display: flex;
        justify-content: space-between;
        color: #333333;
        font-size: 28rpx;
        padding: 0 125rpx;
    }
    .tab-top-item {
        position: relative;
        line-height: 85rpx;
    }
    .tabActive {
        color: #24C79C;
        font-size: 30rpx;
    }
    .tabActive::before {
        content: '';
        width: 37rpx;
        height: 4rpx;
        background: #24C79C;
        position: absolute;
        bottom: 11rpx;
        left: 12rpx;
        /* left: 50%;
        transform: translateX(-50%); */
    }
    .content {
        padding: 0 38rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .content-item {
        width: 215rpx;
        height: 320rpx;
        background: #ffffff;
        margin-top: 30rpx;
    }
    .item-img {
        width: 215rpx;
        height: 230rpx;
        border: 1rpx solid #ccc;
    }
    .item-info {
        display: flex;
        justify-content: space-between;
        padding: 0 15rpx;
        margin-top: 28rpx;
    }
    .item-name {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
    }
    .item-price {
        color: #FF1E1E;
        font-size: 24rpx;
        font-weight: 500;
        padding-left: 15rpx;
    }
    .bottom {
        width: 676rpx;
        height: 112rpx;
        position: fixed;
        bottom: 0rpx;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 28rpx 37rpx 0;
    }
    .bottom-item {
        width: 323rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
    }
</style>